<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>

	<body>
		<canvas id="can" width="500" height="300" style="border: dashed;"></canvas>
		<canvas id="can2" width="500" height="300" style="border: dashed;"></canvas>
		<script>
			var canvas = document.getElementById("can");
			var context = canvas.getContext('2d');
			
			context.strokeStyle = "red";
			context.beginPath();
			//画矩形
			context.strokeRect(100, 200, 100, 50);
			//新路径
			context.beginPath();
			//重置颜色
			context.strokeStyle = "blue";
			//移动画笔
			context.moveTo(100, 100);
			//画线到某点
			context.lineTo(250, 250);
			//画线
			context.stroke();
			//新路径
			context.beginPath();
			context.strokeStyle = "yellow";
			context.fillStyle = "yellow";
			//画圆 x,y,半径，起始角度，终止角度，是否逆时针
			context.arc(350, 150, 75, 0, Math.PI/4*3, false);
			//填充
			context.fill();
			//创建线性渐变范围 起点x,y 终点x,y
			var ling = context.createLinearGradient(250, 50, 250, 100);
			ling.addColorStop(0, "red");
			ling.addColorStop(1, "white");
			// 使用线性渐变对象为画笔的填充属性赋值
			context.fillStyle = ling;
			context.fillRect(200, 10, 200, 100);
			//绘制心形
					context.beginPath();
					
	context.fillStyle = '#c00';
	context.strokeStyle = '#c00';
	context.moveTo(75,40);
	context.bezierCurveTo(75,37,70,25,50,25);
	context.bezierCurveTo(20,25,20,62.5,20,62.5);
	context.bezierCurveTo(20,80,40,102,75,120);
	context.bezierCurveTo(110,102,130,80,130,62.5);
	context.bezierCurveTo(130,62.5,130,25,100,25);
	context.bezierCurveTo(85,25,75,37,75,40);
	context.fill();
	context.stroke();
			
			
			
			var canvas2 = document.getElementById("can2");
			var ctx = canvas2.getContext('2d');
			var rad1 = ctx.createRadialGradient(50,50,20,50,150,50);
			rad1.addColorStop(0,"red");
			rad1.addColorStop(1,"black");
			ctx.fillStyle = rad1;
			ctx.fillRect(0,0,500,300);
			ctx.strokeStyle = "white";
			ctx.arc(50,50,20,0,Math.PI*2,true);
			ctx.arc(50,150,50,0,Math.PI*2,true);
			ctx.stroke();
			
			
	

		</script>
	</body>

</html>